<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import _ from 'lodash';
import {api} from "@jzl/api";

const DEFAULT_FORM = {
  api_type: 2,
  api_store: 1,
  api_uuid: '',
  api_code: '',
  api_name: '',
  api_funame: '',
  api_rest: '',
  api_inparam_schema: {},
  api_outparam_schema: {},
  service_id: null,
  module_id: null
}

const props = defineProps({
  actionType: String,
  currentData: Object,
  module: Object
});

const emit = defineEmits(['close']);

const form = reactive(_.cloneDeep(DEFAULT_FORM));
const loading = ref(false);
const rules = {
  api_code: [
    { required: true, message: '请输入接口编码', trigger: 'blur' },
    { pattern: /^[A-Za-z0-9-_]+$/, message: "编码只能由[ 字母数字-_ ]组成", trigger: 'blur' }
  ],
  api_name: [
    { required: true, message: '请输入接口名称', trigger: 'blur' }
  ]
};

const init = () => {
  let formData = null;
  let data = _.cloneDeep(props.currentData);

  if (data && data.api_id) {
    formData = data;
  } else {
    formData = _.defaults(data || {}, {
      service_id: _.get(props.module, 'service_id'),
      module_id: _.get(props.module, 'svc_module_id'),
      api_type: _.get(props.module, 'svc_module_type'),
      api_code: $utils.getNanoid(),
      api_uuid: $utils.getNanoid()
    }, DEFAULT_FORM);
  }

  Object.assign(form, formData || {});
};

const handleSubmitCreateApi = async () => {
  let data = _.cloneDeep(form);
  let id = _.get(data, 'api_id');
  let ret = null;

  if (!data.api_uuid) {
    data.api_uuid = $utils.getNanoid();
  }

  if (id) {
    ret = await api.services.apiUpdate(id, data);
  } else {
    ret = await api.services.apiCreate(data);
  }

  if (!ret) return;

  let tid = _.get(form, 'tid') || `A_${_.get(ret, 'api_id')}`;

  loading.value = false;

  if (ret) {
    $jui.toast('操作成功！');
    handleCancel(tid);
  }
};

const handleCancel = (flag) => {
  emit('close', flag);
};

onMounted(() => {
  init();
});

watch(() => props.currentData, () => {
  init();
}, { deep: true });

watch(() => props.actionType, () => {
  init();
});
</script>

<template>
  <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
    <el-form-item label="低码位置" prop="api_store">
      <el-radio-group v-model="form.api_store">
        <el-radio :label="1">文件编码</el-radio>
        <el-radio :label="2">在线编码</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="接口名称" prop="api_name">
      <el-input v-model="form.api_name" placeholder="名称，如：增加数据"></el-input>
    </el-form-item>
    <el-form-item label="接口编码" prop="api_code">
      <el-input v-model="form.api_code" placeholder="函数名称"
                :disabled="currentData && currentData.api_id > 0"></el-input>
    </el-form-item>
    <el-form-item label="" label-width="0px" class="form-item-center">
      <el-button size="large" type="primary"
                 @click="handleSubmitCreateApi"> 提交 </el-button>
      <el-button size="large" @click="handleCancel"> 取消 </el-button>
    </el-form-item>
  </el-form>
</template>
